<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="../style/editor.css" rel="stylesheet" type="text/css">
    <script>
        var sLangDir = parent.oUtil.langDir;
        document.write("<scr" + "ipt src='language/" + sLangDir + "/webtable.js'></scr" + "ipt>");
    </script>
    <script>writeTitle()</script>

    <script src="jquery-1.7.min.js" type="text/javascript"></script>

    <!--Slider-->
    <link href="fd-slider/css/skin.css" rel="stylesheet" type="text/css" />
    <script src="fd-slider/js/fd-slider.js" type="text/javascript"></script>

    <!--Spectrum-->
    <script src="spectrum/spectrum.js" type="text/javascript"></script>
    <link href="spectrum/spectrum.css" rel="stylesheet" type="text/css" />

    <!--MiniColors-->
    <script src="minicolors/jquery.miniColors.min.js" type="text/javascript"></script>
    <link href="minicolors/jquery.miniColors.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .item {width:200px;min-height:15px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 15px;
            background:#fff;border:#fff 7px solid;
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
            margin-left:-5px;margin-right:25px;margin-top:10px;margin-bottom:10px;
            border:#fff 1px solid;padding:10px 3px;
            }
        .table-insert tr td {padding:7px 8px;border:#ccc 1px dotted;cursor:pointer;text-align:center;}
    </style>

    <script src="common.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        var sHTML = '<table id="tabInsert" onmouseout="tableout(this)" class="table-insert" style="border-collapse:collapse;margin-top:17px;margin-left:20px;">';        
        for (var i = 1; i <= 10; i++) {
            sHTML += '<tr>';
            for (var j = 1; j <= 7; j++) {
                sHTML += '<td onmouseover="cellover(' + i + ',' + j + ')" onclick="I_InsertTable(' + i + ',' + j + ')">' + i + 'x' + j + '</td>';
            }
            sHTML += '</tr>';
        }
        sHTML += '</table>';

        jQuery(document).ready(function ($) {

            I_RealtimeTable();
            parent.oUtil.onSelectionChanged = new Function("I_RealtimeTable()");
            
            $('#divTableInsert').html(sHTML);

            if (!isiPad) {
                $("#txtColor").miniColors({ change: function (hex, rgb) {
                    I_TableColor(hex);
                }
                });

                $("#txtBgColor").miniColors({ change: function (hex, rgb) {
                    I_TableBackground(hex);
                }
                });

                $("#txtTextColor").miniColors({ change: function (hex, rgb) {
                    I_TableTextColor(hex);
                }
                });
            };

            /* TABLE AUTOFORMAT HERE */
            if (parent.oUtil.obj.enableTableAutoformat == true) {

            }
            else {
                $("#tab2").css("display", "none");
                $("#divAuto").css("display", "none");
            }

            loadTxt(); /* language */
        });

        function I_RealtimeTable() {
            if (parent.oUtil + '' == 'undefined') return;

            //var oTable = I_GetTable(); => tdk bisa pakai ini krn ada setFocus di I_GetTable()
            var obj = parent.oUtil.obj;
            var oTable = obj.Table;
            if (oTable) {
                if (oTable.style.width == "100%") { document.getElementById("rdoWidth1").checked = true }
                else if (oTable.style.width == "") { document.getElementById("rdoWidth2").checked = true }
                else { document.getElementById("rdoWidth3").checked = true; document.getElementById("inpWidth").value = parseInt(oTable.style.width) }

                if (oTable.cellPadding != '') {
                    $("#inpPadding").val(oTable.cellPadding + 'px');
                    $("#valCellPadding").html(oTable.cellPadding + 'px');
                  
                } else {
                    $("#inpPadding").val('0px');
                    $("#valCellPadding").html('0px');
                }

                $("#txtBgColor").val('');
                $("#txtTextColor").val('');
                $("#txtColor").val('');

                var oTD = I_GetTD();
                if (oTD) {
                    if (isiPad) {
                        if (oTD.style.backgroundColor != "transparent")
                            $("#txtBgColor").spectrum("set", oTD.style.backgroundColor);
                        if (oTD.style.color != "transparent")
                            $("#txtTextColor").spectrum("set", oTD.style.color);

                        if (oTD.style.borderColor != "transparent")
                            $("#txtColor").spectrum("set", oTD.style.borderColor);
                    } else {
                        var sBgColor = oTD.style.backgroundColor;
                        var sTextColor = oTD.style.color;
                        var sBorderColor = oTD.style.borderColor;
                        if (sBgColor.indexOf('rgb') != -1) sBgColor = rgb2hex(sBgColor);
                        if (sTextColor.indexOf('rgb') != -1) sTextColor = rgb2hex(sTextColor);
                        if (sBorderColor.indexOf('rgb') != -1) sBorderColor = rgb2hex(sBorderColor);

                        $("#txtBgColor").val(sBgColor);
                        $("#txtTextColor").val(sTextColor);
                        $("#txtColor").val(sBorderColor);
                    }

                    if (oTD.style.borderLeftWidth != '') {
                        $("#inpBorderWidth").val(parseInt(oTD.style.borderLeftWidth) + 'px');
                        $("#valThickness").html(parseInt(oTD.style.borderLeftWidth) + 'px');

                    } else {
                        $("#inpBorderWidth").val('0px');
                        $("#valThickness").html('0px');
                    }

                    if (oTD.style.width != '') {
                        $("#inpCellWidth").val(parseInt(oTD.style.width) + 'px');
                        $("#valCellWidth").html(parseInt(oTD.style.width) + 'px');

                    } else {
                        //$("#inpCellWidth").val(''); //causing set to 250px
                        $("#valCellWidth").html('');
                    }
                    if (oTD.style.height != '') {
                        $("#inpCellHeight").val(parseInt(oTD.style.height) + 'px');
                        $("#valCellHeight").html(parseInt(oTD.style.height) + 'px');

                    } else {
                        //$("#inpCellHeight").val(''); //causing set to 250px
                        $("#valCellHeight").html('');
                    }

                }
            }
        }

        function rgb2hex(rgb) {

            if (rgb.length == 7) return rgb; //already in hex

            try {

                if (rgb == 'transparent') return '';
                var hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
                rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                function hex(x) {
                    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
                }
                return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);

            } catch (e) { return '' }

        }


        function setFullWidth() {
            var oTable = I_GetTable();
            if (oTable)oTable.style.width = "100%";
        }

        function setAutofit() {
            var oTable = I_GetTable();
            if (oTable) oTable.style.width = "";
        }

        function setFixedWidth() {
            //var oTable = I_GetTable(); => tdk bisa pakai ini krn ada setFocus di I_GetTable()
            var obj = parent.oUtil.obj;
            var oTable = obj.Table;
            if (oTable && parseInt(document.getElementById("inpWidth").value)!="NaN") oTable.style.width = parseInt(document.getElementById("inpWidth").value) + 'px';
        }

        // Recursively get all stylesheets in a document, call with base document.styleSheets
        function getStyleSheets(styleSheets, aStyleSheets) {

        	var edtHost = parent.oUtil.oEditor.location.href.match(/:\/\/(.[^/]+)/)[1];

            aStyleSheets = typeof aStyleSheets !== 'undefined' ? aStyleSheets : new Array();
            for (var s = 0; s < styleSheets.length; s++) {

				var myStyle = styleSheets[s];
				if(myStyle.href && myStyle.href.match(/:\/\/(.[^/]+)/)[1] !=  edtHost ) {
            		continue;
        		}

                aStyleSheets.push(styleSheets[s]);
                if (navigator.appName.indexOf('Microsoft') != -1) {
                    getStyleSheets(styleSheets[s].imports, aStyleSheets);
                } else {
                    if (styleSheets[s].cssRules !== null) {
                        for (var r = 0; r < styleSheets[s].cssRules.length; r++) {
                            if (typeof styleSheets[s].cssRules[r].styleSheet !== 'undefined') {
                                getStyleSheets(new Array(styleSheets[s].cssRules[r].styleSheet), aStyleSheets);
                            }
                        }
                    }
                }
            }
            return aStyleSheets;
        }

        function bodyOnLoad() {
            var oEditor = parent.oUtil.oEditor;

            var sHTML = "";
            sHTML += '<div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="cleanFormat()" style="cursor:pointer;text-align:center;letter-spacing:1px;font-size:12px;width:260px;">' + getTxt('Clean Formatting') + '</div>';

            aStyleSheets = getStyleSheets(oEditor.document.styleSheets);
            for (var j = 0; j < aStyleSheets.length; j++) {

                var myStyle = aStyleSheets[j];
                sStore = "";
                var oRules;
                if (navigator.appName.indexOf('Microsoft') != -1) {
                    oRules = myStyle.rules;
                }
                else {
                    oRules = myStyle.cssRules;
                }

                if (oRules !== null) {
                    for (var i = 0; i < oRules.length; i++) {
                        if (typeof oRules.item(i).selectorText === "undefined") { continue; }
                        sSelector = oRules.item(i).selectorText;
                        sCssText = oRules.item(i).style.cssText.replace(/"/g, "&quot;");
                        if (sSelector.match(/table\./gi)) {
                            sSelector = sSelector.substr(6);
                            sSelector = sSelector.split(" ")[0];
                            if (sStore != sSelector) {
                                sStore = sSelector;
                                sHTML += '<div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="applyFormat(\'' + sStore + '\')" style="cursor:pointer;text-align:center;letter-spacing:1px;font-size:12px;width:115px;">' + sStore + '</div>';
                            }
                        }
                    }
                }
            }

            document.getElementById('divTableAuto').innerHTML = sHTML;
        }

        /*
        function bodyOnLoad() {
            var oEditor = parent.oUtil.oEditor;

            var sHTML = "";
            sHTML += '<div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="cleanFormat()" style="cursor:pointer;text-align:center;letter-spacing:1px;font-size:12px;width:262px;">' + getTxt('Clean Formatting') + '</div>';
            
            try {
                for (var j = 0; j < oEditor.document.styleSheets.length; j++) {

                    var myStyle = oEditor.document.styleSheets[j];
                    sStore = "";
                    var oRules;
                    if (navigator.appName.indexOf('Microsoft') != -1) {
                        oRules = myStyle.rules;
                    }
                    else {
                        oRules = myStyle.cssRules;
                    }

                    for (var i = 0; i < oRules.length; i++) {
                        if (typeof oRules.item(i).selectorText === "undefined") { continue; } 
                        sSelector = oRules.item(i).selectorText;
                        sCssText = oRules.item(i).style.cssText.replace(/"/g, "&quot;");
                        if (sSelector.match(/table\./gi)) {
                            sSelector = sSelector.substr(6);
                            sSelector = sSelector.split(" ")[0];
                            if (sStore != sSelector) {
                                sStore = sSelector;
                                sHTML += '<div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="applyFormat(\'' + sStore + '\')" style="cursor:pointer;text-align:center;letter-spacing:1px;font-size:12px;width:117px;">' + sStore + '</div>';
                            }
                        }
                    }
                }
            }
            catch (e) { };
            document.getElementById('divTableAuto').innerHTML = sHTML;
        }*/

        var storeBgColor, storeColor;
        function over(me, hover) {
            storeBgColor = me.style.backgroundColor;
            if (!hover) me.style.backgroundColor = '#c90000';
            else me.style.backgroundColor = hover;
            storeColor = me.style.color;
            me.style.color = '#fff';
        }
        function out(me) {
            me.style.backgroundColor = storeBgColor;
            me.style.color = storeColor;
        }

        function cellover(rows,cols) {
            var oTable = document.getElementById("tabInsert");
            for (var i = 0; i < oTable.rows.length; i++) {
                var oTR = oTable.rows[i];
                for (var j = 0; j < oTR.cells.length; j++) {
                    var oTD = oTR.cells[j];
                    if (i < rows && j < cols) {
                        oTD.style.backgroundColor = '#c90000';
                        oTD.style.color = '#fff';
                    }
                    else {
                        oTD.style.backgroundColor = '#fff';
                        oTD.style.color = '#000';
                    }  
                }
            }
        }
        function tableout(me) {
            var oTable = document.getElementById("tabInsert");
            for (var i = 0; i < oTable.rows.length; i++) {
                var oTR = oTable.rows[i];
                for (var j = 0; j < oTR.cells.length; j++) {
                    var oTD = oTR.cells[j];
                    oTD.style.backgroundColor = '#fff';
                    oTD.style.color = '#000';
                }
            }
        }

        function tabClick(n) {
            if (n == 0) {
                $("#divInsert").css("display", "block");
                $("#tab0").css("background", "#fcfcfc");
                $("#divModify").css("display", "none");
                $("#tab1").css("background", "#ccc");
                $("#divAuto").css("display", "none");
                $("#tab2").css("background", "#ccc");
            }
            if (n == 1) {
                $("#divInsert").css("display", "none");
                $("#tab0").css("background", "#ccc");
                $("#divModify").css("display", "block");
                $("#tab1").css("background", "#fcfcfc");
                $("#divAuto").css("display", "none");
                $("#tab2").css("background", "#ccc");
            }
            if (n == 2) {
                $("#divInsert").css("display", "none");
                $("#tab0").css("background", "#ccc");
                $("#divModify").css("display", "none");
                $("#tab1").css("background", "#ccc");
                $("#divAuto").css("display", "block");
                $("#tab2").css("background", "#fcfcfc");
            }
        }

    </script>

</head>
<body style="margin-top:12px;margin-left:10px;overflow:hidden" onload="bodyOnLoad()">

<div id="tab0" onclick="tabClick(0)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:75px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#fcfcfc;margin-left:22px;margin-top:7px">
    INSERT
</div> 
<div id="tab1" onclick="tabClick(1)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:75px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    MODIFY
</div>
<div id="tab2" onclick="tabClick(2)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:125px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    AUTOFORMAT
</div>

<div style="clear:left"></div>

<table cellpadding="0" cellspacing="0" style="margin-left:7px;">
<tr>
<td valign="top">

    <div id="divInsert" style="color:#000;padding:0px;padding-right:0px;width:340px;height:440px;overflow:auto;border-top:none;background:#fcfcfc;">

        <div id="divTableInsert"></div>

        <div style="margin-left:18px;margin-top:18px">
        <input id="btnDelTable" type="button" value="Delete Selected Table" onclick="if(confirm('Are you sure?')){I_DelTable()}" class="inpBtn" style="width:190px;height:33px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        </div>
<!--        <div style="padding:12px;padding-left:25px;background:#f7f7f7;">
        ROWS: <input id="inpRows" type="text" value="5" style="width:70px;height:23px;" /> &nbsp;
        COLUMNS: <input id="inpCols" type="text" value="4" style="width:70px;height:23px;" />
        <input type="button" name=btnInsert id=btnInsert value="insert" onclick="I_InsertTable($('#inpRows').val(),$('#inpCols').val())" class="inpBtn" style="width:90px;height:33px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        </div>-->

    </div>

    <div id="divModify" style="color:#000;padding:0px;padding-right:0px;width:340px;height:440px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">
        <div style="margin:22px;margin-left:15px;margin-right:0px">
        <input type="button" id="btnIRow1" value="Insert Row (Above)" onclick="I_InsertRow(true)" class="inpBtn" style="width:143px;height:35px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        &nbsp;
        <input type="button" id="btnIRow2" value="Insert Row (Below)" onclick="I_InsertRow(false)" class="inpBtn" style="width:143px;height:35px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        <br /><br />
        <input type="button" id="btnICol1" value="Insert Column (Left)" onclick="I_InsertCol(true)" class="inpBtn" style="width:143px;height:35px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        &nbsp;
        <input type="button" id="btnICol2" value="Insert Column (Right)" onclick="I_InsertCol(false)" class="inpBtn" style="width:143px;height:35px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        <br /><br />
        <input type="button" id="btnDelRow" value="Delete Row" onclick="I_DeleteRow()" class="inpBtn" style="width:143px;height:35px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        &nbsp;
        <input type="button" id="btnDelCol" value="Delete Column" onclick="I_DeleteCol()" class="inpBtn" style="width:143px;height:35px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        <br /><br />
        <input type="button" id="btnMerge" value="Merge Cell" onclick="I_MergeCell()" class="inpBtn" style="width:298px;height:35px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        </div>
    </div>

    <div id="divAuto" style="color:#000;padding:0px;padding-right:0px;width:340px;height:440px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">
        <div id="divTableAuto" style="margin:12px;margin-left:30px;margin-right:0px"></div>
    </div>

</td>
<td style="padding-left:20px;letter-spacing:1px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;" valign="top">

    <div style="margin-top:-20px">
    <b><span id="lblFormat">FORMAT:</span></b> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:cleanFormat()" id="lnkClean" title="" style="color:#000000">CLEAN</a>
    </div>

    <table style="margin-top:10px">
    <tr>
    <td valign="top" colspan="2">
        <table cellpadding="0" cellspacing="0" style="margin-left:-4px;margin-top:-3px">
        <tr>
        <td valign="top">
        <input id="Radio6" type="radio" name="rdoApply" value="table" checked="checked" /><label for="Radio6" id="lblTable">Table</label><br />
        <input id="Radio16" type="radio" name="rdoApply" value="cell" /><label for="Radio16" id="lblCell">Cell</label>
        </td>
        <td valign="top" style="padding-left:20px">
        <input id="Radio7" type="radio" name="rdoApply" value="even" /><label for="Radio7" id="lblEven">Even Rows</label><br />
        <input id="Radio8" type="radio" name="rdoApply" value="odd" /><label for="Radio8" id="lblOdd">Odd Rows</label><br />
        </td>
        <td valign="top" style="padding-left:20px">
            <input id="Radio9" type="radio" name="rdoApply" value="row" /><label for="Radio9" id="lblCurrRow">Current Row</label><br />
            <input id="Radio10" type="radio" name="rdoApply" value="column" /><label for="Radio10" id="lblCurrCol">Current Column</label>
        </td>
        </tr>
        </table>
    </td>
    </tr>

    <tr>
    <td style="padding-top:12px;" valign="top">
        <span id="lblColor">COLOR:</span>
    </td>
    <td style="padding-top:10px;">
        <table cellpadding="0" cellspacing="0" style="">
        <tr>
        <td> 
            <div style="margin-bottom:3px">
            <span id="lblBg">BACKGROUND:</span><span style="font-family:Arial;cursor:pointer"  onclick="$('#txtBgColor').val('');I_TableBackground('')">[x]</span>
            </div>
            <input type="text" id="txtBgColor" class="basic" style="width:55px;height:21px" value="" />
            <script type="text/javascript" language="javascript">
                if (isiPad) $("#txtBgColor").spectrum({
                    color: '#ffffff',
                    change: function (color) {
                        var hsv = color.toHsv();
                        var rgb = color.toRgbString();
                        var hex = color.toHexString();
                        I_TableBackground(hex);
                    },
                    show: function () {

                    },
                    hide: function () {

                    }
                });
            </script>
        </td>
        <td style="padding-left:20px">
            <div style="margin-bottom:3px">
            <span id="lblText">TEXT:</span><span style="font-family:Arial;cursor:pointer" onclick="$('#txtTextColor').val('');I_TableTextColor('')">[x]</span>
            </div>
            <input type="text" id="txtTextColor" class="basic" style="width:55px;height:21px" value="" />
            <script type="text/javascript" language="javascript">
                if (isiPad) $("#txtTextColor").spectrum({
                    color: '#ffffff',
                    change: function (color) {
                        var hsv = color.toHsv();
                        var rgb = color.toRgbString();
                        var hex = color.toHexString();
                        I_TableTextColor(hex);
                    },
                    show: function () {

                    },
                    hide: function () {

                    }
                });
            </script>
        </td>
        </tr>
        </table>
    </td>
    </tr>


    <tr>
    <td valign="top" style="padding-top:15px;">
        <span id="lblBorder">BORDER:</span>
    </td>
    <td valign="top" colspan="2" style="padding-top:15px;">
        <div style="margin-left:-4px;margin-top:-3px;margin-bottom:7px">
        <input id="Radio11" type="radio" name="rdoBorder" value="outside" checked="checked" /><label for="Radio11"><img src="images/border-outside.png" /></label>
        <input id="Radio12" type="radio" name="rdoBorder" value="top" /><label for="Radio12"><img src="images/border-top.png" /></label>
        <input id="Radio13" type="radio" name="rdoBorder" value="bottom" /><label for="Radio13"><img src="images/border-bottom.png" /></label>
        <input id="Radio14" type="radio" name="rdoBorder" value="left" /><label for="Radio14"><img src="images/border-left.png" /></label>
        <input id="Radio15" type="radio" name="rdoBorder" value="right" /><label for="Radio15"><img src="images/border-right.png" /></label>
        </div>

                
        <table cellpadding="0" cellspacing="0" style="">
        <tr>
        <td style="white-space:nowrap;"> 
            <div style="margin-bottom:3px"><span id="lblBorderColor">Color:</span> <span style="font-family:Arial;cursor:pointer" onclick="$('#txtColor').val('');I_TableColor('')">[x]</span>
            </div>
            <input type="text" id="txtColor" class="basic" style="width:45px;height:21px" value="" />
            <script type="text/javascript" language="javascript">
                if (isiPad) $("#txtColor").spectrum({
                    color: '#ffffff',
                    change: function (color) {
                        var hsv = color.toHsv();
                        var rgb = color.toRgbString();
                        var hex = color.toHexString();
                        I_TableColor(hex);
                    },
                    show: function () {

                    },
                    hide: function () {

                    }
                });
            </script>
        </td>
        <td style="padding-left:10px;padding-top:5px;">
            <div style="margin-bottom:3px"><span id="lblThickness">Thickness:</span> <span id="valThickness"></span>
            </div>
            <input name="inpBorderWidth" id="inpBorderWidth" type="range" min="0" max="30" step="1" title="Range: 0 to 30 in steps of 1" value="1" />
	        <script type="text/javascript" language="javascript">
	            fdSlider.addEvent(document.getElementById("inpBorderWidth"), "change", function (e) {
	                I_TableBorder($("#inpBorderWidth").val());
	                $("#valThickness").html($("#inpBorderWidth").val() + 'px');
	            });
   	        </script>        
        </td>

        </tr>
        </table>

    </td>
    </tr>

    <tr>
    <td valign="top" style="padding-top:5px;">
        <span id="lblCellSize">CELL SIZE:</span>
    </td>
    <td valign="top" colspan="2" style="padding-top:5px;">
            <span id="lblCellWidth">Width:</span> <span id="valCellWidth"></span> <span style="font-family:Arial;cursor:pointer" onclick="cellWidth('');$('#inpCellWidth').val('');$('#valCellWidth').html('');">[x]</span>
            <br />
            <input name="inpCellWidth" id="inpCellWidth" type="range" min="0" max="500" step="1" title="Range: 0 to 500 in steps of 1" value="1" />
	        <script type="text/javascript" language="javascript">
	            fdSlider.addEvent(document.getElementById("inpCellWidth"), "change", function (e) {
	                cellWidth($("#inpCellWidth").val());
	                $("#valCellWidth").html($("#inpCellWidth").val() + 'px');
	            });
   	        </script>
            <div></div>
            
            <span id="lblCellHeight">Height:</span> <span id="valCellHeight"></span> <span style="font-family:Arial;cursor:pointer" onclick="cellHeight('');$('#inpCellHeight').val('');$('#valCellHeight').html('');">[x]</span>
            <br />
            <input name="inpCellHeight" id="inpCellHeight" type="range" min="0" max="500" step="1" title="Range: 0 to 500 in steps of 1" value="1" />
	        <script type="text/javascript" language="javascript">
	            fdSlider.addEvent(document.getElementById("inpCellHeight"), "change", function (e) {
	                cellHeight($("#inpCellHeight").val());
	                $("#valCellHeight").html($("#inpCellHeight").val() + 'px');
	            });
   	        </script>  
    </td>
    </tr>

    <tr>
    <td valign="top" style="padding-top:5px;">
        <span id="lblTextAlign">TEXT ALIGN:</span>
    </td>
    <td valign="top" colspan="2" style="padding-top:5px;">
            <input id="btnAlignLeft" type="button" class="inpBtn" style="width:75px;height:25px" value="Left" onclick="cellHrAlign('left')" />
            <input id="btnAlignCenter" type="button" class="inpBtn" style="width:75px;height:25px" value="Center" onclick="cellHrAlign('center')" />
            <input id="btnAlignRight" type="button" class="inpBtn" style="width:75px;height:25px" value="Right" onclick="cellHrAlign('right')" /><br />
            <input id="btnAlignTop" type="button" class="inpBtn" style="width:75px;height:25px" value="Top" onclick="cellVrAlign('top')" />
            <input id="btnAlignMiddle" type="button" class="inpBtn" style="width:75px;height:25px" value="Middle" onclick="cellVrAlign('middle')" />
            <input id="btnAlignBottom" type="button" class="inpBtn" style="width:75px;height:25px" value="Bottom" onclick="cellVrAlign('bottom')" />
    </td>
    </tr>
    </table>

    <div style="border-top:#fff 1px solid;border-bottom:#ccc 1px solid;margin-top:9px;margin-bottom:9px;margin-left:0px;width:333px;height:1px"></div>

    <span id="lblCellPadding">CELL PADDING:</span> <span id="valCellPadding"></span><br />
    <input name="inpPadding" id="inpPadding" type="range" min="0" max="100" step="1" title="Range: 0 to 30 in steps of 1" value="0" />
	<script type="text/javascript" language="javascript">
	    fdSlider.addEvent(document.getElementById("inpPadding"), "change", function (e) {
	        I_TablePadding($("#inpPadding").val());
	        $("#valCellPadding").html($("#inpPadding").val() + 'px');
	    });	    
   	</script>
    <table cellpadding="0" cellspacing="0" style="margin-left:-3px;">
    <tr>
    <td>   

        <input id="rdoWidth1" name="rdoWidth" onclick="setFullWidth()" type="radio" /><label id="lblFullWidth" for="rdoWidth1">Full Width</label>&nbsp;
        <input id="rdoWidth2" name="rdoWidth" onclick="setAutofit()" type="radio" checked="checked" /><label id="lblAutofit" for="rdoWidth2">Autofit</label>&nbsp;
        <input id="rdoWidth3" name="rdoWidth" onclick="setFixedWidth()" type="radio" /><label id="lblFixedWidth" for="rdoWidth3">Fixed Width:</label>&nbsp;
        <input id="inpWidth" type="text" style="width:35px;height:23px" onkeyup="document.getElementById('rdoWidth3').checked=true;setFixedWidth();" />&nbsp; px
   
    </td>
    </tr>
    </table>
</td>
</tr>
</table>

</body>
</html>
